<template>
  <div class="box">
    <!-- Logo图片 -->
    <transition name="fade">
      <img src="@/assets/RyderLogo.png" v-show="show" />
    </transition>
    <!-- 遮罩层加载中 -->
    <transition name="fade-loading">
      <van-overlay :show="loading">
        <div class="wrapper">
          <van-loading type="spinner" size="5vh" vertical color="#fff">加载中...</van-loading>
        </div>
      </van-overlay>
    </transition>

    <!-- 弹窗 -->
    <el-dialog v-model="showCompany" title="资料验证" :close-on-click-modal="false" :close-on-press-escape="false"
      :show-close="false">
      <el-form :model="form" label-width="120px" :rules="rules" ref="ruleFormRef">
        <el-form-item label="工号" prop="RYD_RyderNo">
          <el-input v-model="form.RYD_RyderNo" />
        </el-form-item>
        <el-form-item label="身份证后六位" prop="ID">
          <el-input v-model="form.ID" />
        </el-form-item>
        <el-form-item label="公司" prop="RYD_CompanyNo">
          <el-select v-model="form.RYD_CompanyNo" placeholder="请选择">
            <el-option v-for="item in companyColumns" :key="item.ryD_Id" :label="item.ryD_CompanyName"
              :value="item.ryD_CompanyNo" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="onSubmit">确定</el-button>
      </template>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: 'WindowsLoading',
}
</script>

<script setup>
import { onMounted, reactive, ref, } from "vue";
import axios from "@/utils/axios";
import { useRouter, useRoute } from 'vue-router'
import { Toast } from 'vant';
// eslint-disable-next-line no-unused-vars
const router = useRouter();
const route = useRoute();

let RYD_DemandId = "";
var ContingencyPlanId = '';

let RYD_WxNo = "";

let RYD_UserId = '';
//加载中遮罩层
let loading = ref(false);
//Logo图片显示
let show = ref(false);
//选择公司和RydNo验证弹窗
let showCompany = ref(false);
//选择公司加载图标
// let loadingCompany = ref(true);
//公司列表
let companyColumns = ref();

let form = ref({
  RYD_RyderNo: '',
  RYD_CompanyNo: '',
  ID: '',
  RYD_UserId: ''
});
let ruleFormRef = ref();
let rules = reactive({
  RYD_RyderNo: [
    { required: true, message: '请填写工号', trigger: 'blur' },
    { len: 6, message: '请输入6位数字，不够6位前面补0', trigger: 'blur' }
  ],
  ID: [
    { required: true, message: '请填写身份证后六位', trigger: 'blur' },
    { len: 6, message: '请输入正确的身份证后六位', trigger: 'blur' }
  ],
  RYD_CompanyNo: [
    { required: true, message: '请选择公司', trigger: 'blur' },
  ],
})
if (route.query != null) {
  if (route.query.code == null || route.query.code == "") {
    router.back();
  }
  if (route.query.RYD_DemandId != null && route.query.RYD_DemandId != "") {
    RYD_DemandId = route.query.RYD_DemandId;
    sessionStorage.setItem('RYD_DemandId', RYD_DemandId)
  }
  if (route.query.ContingencyPlanId != null && route.query.ContingencyPlanId != "") {
    ContingencyPlanId = route.query.ContingencyPlanId;
    sessionStorage.setItem('ContingencyPlanId', ContingencyPlanId)
  }
  const code = route.query.code;
  var type = route.query.rType;
  loading.value = true;
  var url = '';
  if (type == undefined) {
    url = "/api/GetWxNo?code=" + code;
  } else {
    url = "/api/GetWxNo?code=" + code + "&type=" + type;
  }
  axios({
    method: 'get',
    url: url
  }).then(res => {
    if (res == "" || res == null) {
      Toast.fail({ overlay: true, message: '错误', duration: 0 })
    } else {
      RYD_WxNo = res;
      inspect();
    }
  }).catch(() => {
    Toast.fail({ overlay: true, message: '错误', duration: 0 })
  })
} else {
  router.back();
}

//显示加载中的遮罩层
onMounted(() => {
  show.value = true;
})
//检查当前WxId是否注册过、是否选择公司、是否填写工号

function inspect() {
  loading.value = true;
  axios({
    method: 'get',
    url: "/api/Inspect?RYD_WxNo=" + RYD_WxNo
  }).then(res => {
    RYD_UserId = res[1];
    sessionStorage.setItem("RYD_UserId", RYD_UserId);
    sessionStorage.setItem("token", res[2]);
    switch (res[0]) {
      case "RYD_Company":
        loading.value = false;
        showCompany.value = true;
        axios({
          method: 'get',
          url: '/api/SetCompany',
        }).then(res => {
          companyColumns.value = res;
        })

        break;
      case "RYD_RyderNo":
        loading.value = false;
        showCompany.value = true;
        axios({
          method: 'get',
          url: '/api/SetCompany',
        }).then(res => {
          companyColumns.value = res;
        })

        break;
      default:
        if (RYD_DemandId != null && RYD_DemandId != "") {
          sessionStorage.removeItem("RYD_DemandId");
          router.push({
            name: "WindowsDemandList", query: {
              type: 1
            }
          });
          break;
        }
        if (ContingencyPlanId != null && ContingencyPlanId != "") {
          router.push({
            name: "ShowContingencyPlan", query: {
              ContingencyPlanId
            }
          });
          break;
        }
        if (null != route.query.system && "" != route.query.system) {
          if (route.query.system == 'canteen') {
            location.replace("http://szcr.ryderems.com:8117/#/?RYD_UserId=" + res[1] + "&token=" + res[2] + "&RYD_WxNo=" + RYD_WxNo);
            break;
          } else if (route.query.system == 'canteenxf') {
            location.replace("http://szcr.ryderems.com:8127/#/?RYD_UserId=" + res[1] + "&token=" + res[2] + "&RYD_WxNo=" + RYD_WxNo);
            break;
          }
        }
        router.push({ name: "WindowsHome" });
        break;
    }

  }).catch(err => {
    Toast.fail({ overlay: true, message: '错误' });
  })
}

//资料检测
function onSubmit() {
  if (!ruleFormRef.value) return
  ruleFormRef.value.validate((valid, fields) => {
    if (valid) {

      showCompany.value = false;
      loading.value = true;
      //设置公司
      axios({
        method: 'Put',
        url: "/api/SetCompany",
        data: {
          RYD_CompanyNo: form.value.RYD_CompanyNo,
          ryD_UserId: RYD_UserId
        }
      }).then(res => {
        if (res == true) {
          //设置工号
          axios({
            method: 'post',
            url: "/api/Inspect",
            data: {
              RYD_RyderNo: form.value.RYD_RyderNo,
              ID: form.value.ID,
              RYD_Id: RYD_UserId
            }
          }).then(res => {
            if (res == true) {
              router.push("WindowsHome");
            } else {
              loading.value = false;
              Toast.fail({
                duration: 1500,
                message: '工号或身份证后六位错误',
                overlay: true
              })
              setTimeout(() => {
                showCompany.value = true;
              }, 1500);
            }
          }).catch(err => {

            loading.value = false;
            Toast.fail({
              duration: 1500,
              message: '设置工号错误',
              overlay: true
            })
            setTimeout(() => {
              showCompany.value = true;
            }, 1500);
          })
        } else {
          loading.value = false;
          Toast.fail({
            duration: 1500,
            message: '设置公司错误',
            overlay: true
          })
          setTimeout(() => {
            showCompany.value = true;
          }, 1500);
        }
      }).catch(err => {

        loading.value = false;
        Toast.fail({
          duration: 1500,
          message: '设置公司错误',
          overlay: true
        })
        setTimeout(() => {
          showCompany.value = true;
        }, 1500);
      })


    }
  })
}
</script>

<style scoped>
/* 页面样式 */
.box {
  text-align: center;
}

img {
  height: 15vh;
  margin-top: 35vh;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* 过渡效果 */
.fade-enter-active,
.fade-leave-active {
  transition: all 2s cubic-bezier(1, 0.5, 0.8, 1);
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.fade-loading-enter-active,
.fade-loading-leave-active {
  transition: all 0.5s cubic-bezier(1, 0.5, 0.8, 1);
}

.fade-loading-enter-from,
.fade-loading-leave-to {
  opacity: 0;
}
</style>
